<template>
  <div id="app" :style="customStyle">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">

    </router-view>
  </div>
</template>

<script>
  import {getStore, getYourIP} from "./common";
  import {mapState} from "vuex";

  export default {
    name: 'App',
    data(){
      return{
        currentDeviceIp:''
      }
    },
    created(){
      getYourIP();
    },
    computed: {
      customStyle(){
        if(this.$route.query.role === '26O'){
          return {overflow:'hidden',height:'100vh'}
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "style/indexStyle.css";
  html, body, div, section, span, p, ul, li, ol {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: bimp-font;
  }
  #app {
    // position: absolute;
    width: 100%;
   // overflow-x: auto;
    // height: 100vh;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f2;
    /*兼容火狐浏览器样式的*/
      scrollbar-width: thin;
      scrollbar-color: #ccc #eee;
  }
  .header-box{
    padding: 0 !important;
  }
  .divider-v{
    position: relative;
    width: 1px;
    height: 90%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: linear-gradient(to bottom, #fff, #ccc, #fff)
  }
  .divider-h{
    position: relative;
    width: 90%;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background: linear-gradient(to bottom, #fff, #ccc, #fff)
  }
  .card-module{
    width: 100%;
    overflow: visible !important;
    position: relative;
    border-radius: 2px !important;
    &:hover{
      box-shadow: none !important;
    }
    &:not(:first-of-type){
      margin-top: 10px;
    }
    .card-inner{
      padding: 16px;
    }
    .cm-title{
      border-bottom: 1px solid #E9E9E9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      .left{
        .label{
          font-size: 14px;
          font-weight: 500;
        }
        .info{
          margin-left: 8px;
        }
        .detail{
          margin-left: 8px;
          font-size: 14px;
          color: #0A2A61;
          vertical-align: middle;
          cursor: pointer;
          em{
            font-style: normal;
            vertical-align: middle;
          }
        }
      }
      svg{
        vertical-align: middle
      }
      .right{
        font-size: 14px;
        color: #323233;
      }
    }
    .cm-content{
      position: relative;
      padding: 16px;
      z-index: 0;
    }
    .el-card__body{
      padding: 0;
    }
    &:nth-of-type(1){
      z-index: 1
    }
  }
  .el-form--inline{
    display: flex;
    flex-wrap: wrap;
  }
  .el-form--inline .el-form-item{
    width: 32.66666%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center;
  }
  .el-form--inline .el-form-item__label{
    width: 85px;
  }
  .el-form--inline .el-form-item__content{
    width: 90%;
    flex: 50
  }
  .el-form--inline .el-select, .el-form--inline .el-input{
    width: 100%;
    display: flex;
    align-items: center;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: auto !important;
  }
  .el-table__row>td{
    border: none !important;
  }
  .el-table::before {
    height: 0!important;
  }
  .deviceForm{
    min-height: 300px!important;
    max-height: 434px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: rgba(48,47,67,.9) !important;
    color:white !important;
    font-weight: bold;
  }
  .el-table td, .el-table th.is-leaf {
    border-bottom: 1px  solid rgba(255, 255, 255, 0.2)!important;
  }
  .align-right-btns{
    padding: 10px 0;
    text-align: right;
  }
  .align-right-pagination{
    padding: 10px 0;
    text-align: right;
  }
  .no-data{
    padding: 100px;
    text-align: center;
  }
  .page-wrap{
    width: 100%;
    padding: 10px;
    overflow-y: auto;
  }
  .remark{
    margin: 30px 0;
    .re-title{
      margin: 10px 0;
      font-size: 16px;
      font-weight: bolder;
    }
    .re-detail{
      font-size: 14px;
      line-height: 28px;
    }
  }
  .el-range-input{
    background: rgba(143, 163, 204, 0.2)!important;
    color: black!important;
  }
  .radiogroup{
    background: rgb(48, 47, 67) !important;
  }
  .el-date-editor.el-range-editor.el-input__inner{
    background: rgb(48, 47, 67)  !important;
    .el-range-separator{
      margin: 0 6px 0 2px;
    }
  };


  el-radio-button.is-active{
    .el-radio-button__inner{
      border: none;
      color: white;
      background: #336CB5 !important;
    }
  }
  .el-radio-button{
    .el-radio-button__inner{
      border: none;
      color: white;
      background: rgb(48, 47, 67) !important;
    }
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  }
  .widget{
    margin-top: 10px;
    height: 46px;
    justify-content: space-between;
    display: flex;
    align-items: center;
    .addButton{
      margin-right: 30px;
    }
  }
  .el-radio-button__inner{
    padding: 8px 20px!important;
  }
  // 圆环进度条
  .vue-circular-progress .percent{
    font-size: 12px;
  }
  .is-zhenshu .vue-circular-progress .percent .percent__dec,
  .is-zhenshu .vue-circular-progress .percent .dot{
    display: none;
  }
  .vue-circular-progress .percent span{
    font-size: inherit;
  }
  .only-hour{
    .el-time-panel{
      width: 100px;
    }
    .el-time-spinner__wrapper{
      width: 100% !important;
    }
    .el-time-spinner__wrapper.el-scrollbar:nth-of-type(2){
      display: none;
    }
  }

  // 汽泡
  .el-tooltip__popper,.el-tooltip__popper.is-dark{background:rgba(0,0,0,0.6) !important;}
  .el-tooltip__popper[x-placement^=top] .popper__arrow {
    border-top-color: rgba(0,0,0,0.4) !important;
  }
  .el-tooltip__popper[x-placement^=top] .popper__arrow:after {
    border-top-color: rgba(0,0,0,0.4) !important;
  }

  // 蓝色单选按钮
  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
    background-color: #2B78FF !important;
    border-color: #2B78FF !important;
  }
  .el-table__empty-block{
    background: rgb(48, 47, 67)!important;
  }
  .el-form-item {
    margin-bottom: 12px!important;
  }

  // 蓝色按钮
  .el-button--primary:not(.is-plain):not(:hover){
    background-color: #2B78FF !important;
    border-color: #2B78FF !important;
  }
  // 蓝色边框按钮
  .el-button--primary.is-plain{
    color: #2B78FF !important;
    border-color: #2B78FF !important;
  }
  .el-drawer__header{
    margin-bottom: 10px!important;
  }
  .el-button--primary.is-plain:hover,
  .el-button--primary.is-plain:active,
  .el-button--primary.is-plain:focus{
    color: #fff !important;
    background-color: #2B78FF !important;
  }
  .el-button--primary.is-plain:focus-within{
    color: #fff !important
  }
  .el-menu {
    border-right: none!important;
  }
  .el-message-box{
    background: rgba(48,47,67,.9)!important;
    border: none;
    box-shadow: none;
    .el-message-box__header{
      color: white;
      .el-message-box__title{
        color: white!important;
      }
    }
    .el-message-box__message{
      color: white!important;
    }
  }
  .my-tooltip{
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 15px;
    border-radius: 3px;
    &:before{
      width: 12px;
      height: 12px;
      position: absolute;
      content: "";
      border-left: 1px solid #2B78FF;
      border-top: 1px solid #2B78FF;
      background-color: rgba(255, 255, 255, 0.7);
      border-radius: 2px;
      left: -3px;
      top: 50%;
      transform: rotate(-45deg) translateY(-50%);
    }
  }

  .flow-form{
    margin: 24px 0;
    .ff-label{
      font-size: 16px;
      font-weight: bold;
      color: #333;
      position: relative;
      padding-left: 24px;
      background-repeat: no-repeat;
      background-size: 16px;
      background-position: left center;
    }
    .form-wrap{
      .ff-form{
        margin: 24px 0 42px 0;
      }
    }
    .form-btns{
      padding-left: 134px;
      .btn{
        min-width: 90px;
        &:not(:first-child){
          margin-left: 30px;
        }
      }
    }
    .el-form-item.full-width{
      width: 98%;
    }
    .el-form-item--small .el-form-item__label{
      margin-left: 23px;
      line-height: 22px;
    }
    .el-form-item--small .el-form-item__content{
      margin-left: 0;
    }
  }

  .flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex-between{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .flex-evenly{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  .successPrimary{
    color: #37E495;
  }
  .errorPrimary{
    color:#FF3F20;
  }
  .leftBorder{
    height: 16px;
    line-height: 16px;
    display: inline-block;
    padding-left: 6px;
    border-left: #336CB5 2px solid;
  }
  .el-input--mini .el-input__inner{
    background: rgba(111,117,131,.3);
    color: #1acc8f;
    padding: 0 2px;
    font-size: 16px;
  }
  .el-table__body-wrapper .is-scrolling-left{
    background: #4e6380!important;
  }
  .VonSelect .el-input__inner{
    padding: 0 6px!important;
  }
  i{
    margin: 0 6px;
  }
  .el-checkbox__label{
    color: white!important;
  }
  .el-radio__label{
    color: white!important;
  }
  /*最外层透明*/
  .el-table, .el-table__expanded-cell{
    background-color: transparent!important;
  }
  /* 表格内背景颜色 */
  .el-table th,
  .el-table tr,
  .el-table td {
    background-color: transparent!important;
  }
  .btn-prev{
    background: transparent!important;
  }
  .btn-next{
    background: transparent!important;
  }
  .el-pagination__total{
    color: white!important;
  }
  .el-menu--vertical{
    top: 81px!important;
    height: 90vh!important;
    overflow-y: scroll!important;
  }
  .el-menu--vertical ul{
    padding: 0!important;
  }
  .el-drawer{
    background: linear-gradient(-30deg, rgba(67, 85, 110,1),rgba(48, 47, 67,1))!important;
    color: white!important;
  }
  #el-drawer__title{
    color: white;
  }
  .el-drawer__body{
    overflow-x: hidden!important;
    overflow-y: auto!important;
  }
  .el-radio-button:first-child .el-radio-button__inner {
     border-left:none!important;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 12px!important;
  }
  .el-input-group__append, .el-input-group__prepend {
    background-color: transparent!important;
     padding: 0 2px!important;
    font-weight: 300!important;
    vertical-align: baseline!important;
    font-size: 14px!important;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: rgba(255,255,255,.4);
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-form-item__content{
    color: rgba(255,255,255,.6);
    font-weight: bold;
  }
  .el-tabs__nav.is-top{
    border: none!important;
      background: linear-gradient(-30deg, rgba(67, 85, 110, 0.5), rgba(48, 47, 67, 0.5))!important;
  }
  .el-tabs__item.is-top{
    border: none!important;
    color: white!important;
  }
  .el-tabs__item.is-top.is-active{
    background: rgba(51, 108, 181, 1);
  }
  .el-tabs__header{
    margin: 0!important;
  }
  .el-tabs__content{
    height: calc( 100% - 40px)!important;
    border-radius: 0 0 10px 10px;
  }
  .el-scrollbar{
    background:#43556E!important;
    border: none!important;
  }
  .el-select-dropdown__item{
    color: white!important;
  }
  .el-select-dropdown__item.hover{
    background:  rgba(48, 47, 67, 1)!important;
    color: white!important;
  }
  .el-input__suffix{
    right: -8px;
  }
  .el-select-dropdown{
    border: 1px solid rgba(48, 47, 67, .9)!important;
  }
  .el-select-dropdown__item{
    background:#43556E!important;
  }
  .backTOP_lastPage{
    cursor: pointer;
    color: white;
    font-size: 16px;
    width: 100%;
    padding: 8px 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .VonLargeScreenTable .el-table--border{
    border: none!important;
  }
  .VonLargeScreenTable .el-table__empty-block {
    background: transparent!important;
  }
  .el-collapse{
      border-bottom: none!important;
  }
  .el-collapse-item__header{
    background: transparent!important;
    color: white!important;
  }
  .el-collapse-item__wrap{
    background: transparent!important;
    color: white!important;
  }
  .el-table__expand-icon{
   color: white!important;
  }
  .el-tag{
    background: rgba(0,0,0,0.4)!important;
    color: white!important;
    border: none!important;
    margin: 10px 4px!important;
  }
  .el-popover{
    background: #7695d4!important;
    border: none!important;
  }
  .dv-scroll-board{
    .rows{
      .row-item{
        .ceil{
          font-size: 22px!important;
        }
      }
    }
  }
</style>
